﻿@model List<Article>

@{
    ViewData["Title"] = "Blog";
}

<link rel="stylesheet" href="~/css/blog/index.min.css" />

<div class="container mt-4 mb-5">
    <div class="row post">

        <aside class="col-lg-3 d-none d-lg-block reveal">

            @await Component.InvokeAsync("TopTags")
            <br />
            @await Component.InvokeAsync("Categories")

        </aside>

        <selection class="col-lg-9 col-md-12">
            <h2 class="display-4">@ViewBag.Warning</h2>
            <hr />

            <div id="postdiv">

                @foreach (Article article in Model)
                {
                    <article class="reveal">
                        <a class="articleTitle" asp-controller="Blog" asp-action="Detail" asp-route-id="@article.ArticleCode">
                            @article.Title
                        </a>

                        <p class="date mt-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
                                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                            </svg>
                            <span class="align-middle mr-2">@article.Time.ToString("yyyy/MM/dd")</span>

                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
                                <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z" />
                            </svg>
                            <span class="align-middle">@article.Category.CategoriesName</span>
                        </p>

                        <p>@article.Overview</p>
                        <div class="post-tags">
                            @{
                                var articleTags = article.ArticleTags;
                            }

                            @foreach (var articleTag in articleTags)
                            {
                                <a class="btn btn-primary mb-1" asp-action="Tags" asp-route-id="@articleTag.Tag.TagName">
                                    @articleTag.Tag.TagName
                                </a>
                            }
                        </div>
                    </article>
                    <div class="mb-4 d-md-block"></div>
                    <hr class="d-md-block" />
                }
            </div>

            @if (ViewBag.Pagination != null)
            {
                <partial name="Pagination" model="@ViewBag.Pagination"/>
            }

        </selection>

    </div>
</div>